import { Form, Input, Button, Checkbox } from 'antd'

import './index.css'

// 导入图片文件
import logo from '../../assets/images/logo.png'

const Login = () => {
  const onFinish = values => {
    console.log('Received values of form: ', values)
  }

  return (
    <div className='login'>
      <div className='login-wrapper'>
        <div>
          <img className='logo' src={logo} alt='' />
        </div>

        <Form
          className='login-form'
          initialValues={{
            remember: true,
            mobile: '13911111111',
            code: '246810',
          }}
          onFinish={onFinish}
          size='large '
        >
          <Form.Item
            name='mobile'
            rules={[
              { required: true, message: '必须输入手机号!' },
              {
                pattern: /^1[3-9]\d{9}$/,
                message: '手机号格式不对',
              },
            ]}
          >
            <Input placeholder='请输入手机号' />
          </Form.Item>
          <Form.Item
            name='code'
            rules={[
              { required: true, message: '必须输入密码!' },
              { pattern: /^\d{6}$/, message: '验证码格式不对!' },
            ]}
          >
            <Input placeholder='请输入验证码' />
          </Form.Item>
          <Form.Item>
            <Form.Item name='remember' valuePropName='checked' noStyle>
              <Checkbox>我已阅读并同意「用户协议」和「隐私条款」</Checkbox>
            </Form.Item>
          </Form.Item>

          <Form.Item>
            <Button block type='primary' htmlType='submit' className='login-form-button'>
              登 录
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}

export default Login
